<template>
  <div>
    <div ref="canvasRef" class="canvas" :style="{ height: height }" />
  </div>
</template>

<script>
import { defineComponent, ref, reactive, watch, onMounted, computed, onBeforeUnmount, markRaw } from "vue";
import * as echarts from 'echarts';
import symbolImg from '@/assets/data-overview/symbol.svg'

export default defineComponent({
  name: "LineChart",
  props: {

    height: {
      type: String,
      default: '250px'
    },
    xAxisData: { // 地区code
      type: Array,
      default: () => []
    },
    chartData: { // 地区code
      type: Array,
      default: () => []
    },
  },
  setup(props, { emit }) {

    const canvasRef = ref(null)
    const myChart = ref(null);

    const option = computed(() => {
      return {
        grid: {
          top: '10',
          left: '0',
          right: 40,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          showContent: true,
          formatter: function (value, index) {
                return `${value[0].axisValue}  次数：${value[0].value}`;
              },
          rich: {
            title: {
              fontWeight: 'bold'
            }
          },
          axisPointer: {
            show: true,
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
           // name: params.type == 0 ? '日期' : params.type == 0 ? '月份' : '年份',
          type: 'category',
          boundaryGap: false,
          axisTick: {
            //坐标轴刻度相关设置。
            show: true,
            lineStyle: {
              color: '#2E69EB',
              cap: 'round',

            },
          },
          data: props.xAxisData,
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 20
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 2,
          axisLabel: {
            formatter: '{value} '
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: '#DBDEE6',
            },
          },
        },
        series: [
          {
            data: props.chartData,
            type: 'line',
            smooth: true,
            symbol: 'image://'+symbolImg,
            symbolSize: 20,
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2E69EB'
                },
                {
                  offset: 1,
                  color: '#2798FF'
                }
              ]),
              shadowBlur: 0
            },
            areaStyle: { //区域填充样式
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(46,105,235,0.2)"
                },
                {
                  offset: 1,
                  color: "rgba(46,105,235,0)"
                }
              ], false),
              shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
              shadowBlur: 10 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          }
        ]
      };
    });

    const init = () => {
      if (myChart.value) {
        myChart.value.clear()
      } else {
        myChart.value = markRaw(echarts.init(canvasRef.value)); // 解决弹出框不显示的问题
      }
    }
    watch(() => props.chartData, () => {
      init()
      myChart.value.setOption(option.value);
    })
    onBeforeUnmount(() => {
      myChart.value && myChart.value.dispose()
    })
    onMounted(() => {
      init()
    });

    return {
      canvasRef
    };
  },
});
</script>

<style lang="scss" scoped>
.canvas {
  pointer-events: auto;
}
</style>
